<template>
    <div id="one">
        <img :src="header.backgroundCoverUrl" alt="">
        <div class="one_header">
          <div class="one_wen1">
              <p>{{header.name}}</p>
              <span>{{header.updateFrequency}}</span>
          </div>
          <div class="one_wen2">
              <p>{{header.description}}</p>
              <p>本周封面：易柳阁></p>
          </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
          header:{},
          id:this.$route.params.id
        }
    },
     created(){
        this.getid()
    },
    methods:{
        getid(){
        this.$axios.get('/playlist/detail?id='+this.id)
             .then(response=>{
                 this.header = response.data.playlist
             })

        }
    },
   
}
</script>

<style scoped>
#one{
    width:100%;
    height:210px;
    padding:40px 20px;
    position: relative;
}   
#one>img{
    width:100%;
    height:210px;
    position:absolute;
    left:0;
    top:0;
    z-index: -2;
}
.one_wen1{
    margin-bottom: 20px;
}
.one_wen1>p{
    color:white;
    font-size:16px;
}
.one_wen1>span{
    font-size:13px;
    display:inline-block;
    padding:1px 2px;
    font-size:8px;
    color:#C5C6C9;
    background-color: #717983;
}
.one_wen2{
    font-size:14px;
    color:white;
}
</style>